<template>
    <div class="lottery">
        <div class="choose-time">
            <mt-button size="small" id="time" @click="selectData" type="default">请选择时间:</mt-button>
            <span>{{dateVal}}</span>
        </div>
        <mt-datetime-picker
            ref="datePicker"
            type="date"
            :startDate="startTime"
            :endDate="endTime"
            year-format="{value}"
            month-format="{value}"
            date-format="{value}"
            @confirm="handleConfirm"
        ></mt-datetime-picker>

        <p @click="goto" class="urls">官网查询</p>
        <!-- --------------- -->
        <div class="list">
            <el-table
                class="tables"
                size="mini"
                :header-cell-style="{background:'#ccc'}"
                :data="list"
                stripe
                style="width: 100%;text-align:center"
            >
                <el-table-column prop="issue" label="期数" min-width="90"></el-table-column>
                <el-table-column prop="quantity" label="万" min-width="40">
                    <template slot-scope="scope">
                        <span v-if="scope.row.place" :class="[scope.row.num!='待开奖'?'bg2':'']">{{scope.row.num.split('')[0]}}</span>
                        <span v-else class="bg">{{scope.row.num.split('')[0]}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="itemAmount" label="千" min-width="40">
                    <template slot-scope="scope">
                        <span v-if="scope.row.place" :class="[scope.row.num!='待开奖'?'bg2':'']">{{scope.row.num.split('')[1]}}</span>
                        <span v-else class="bg">{{scope.row.num.split('')[1]}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="isWinName" label="百" min-width="40">
                    <template slot-scope="scope">
                        <span v-if="scope.row.place" :class="[scope.row.num!='待开奖'?'bg2':'']">{{scope.row.num.split('')[2]}}</span>
                        <span v-else class="bg">{{scope.row.num.split('')[2]}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="backAmount" label="十" min-width="40">
                    <template slot-scope="scope">
                        <span v-if="scope.row.place" :class="[scope.row.num!='待开奖'?'bg2':'']">{{scope.row.num.split('')[3]}}</span>
                        <span v-else class="bg">{{scope.row.num.split('')[3]}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="winAmount" label="个" min-width="40">
                    <template slot-scope="scope">
                        <span v-if="scope.row.place" :class="[scope.row.num!='待开奖'?'bg2':'']">{{scope.row.num.split('')[4]}}</span>
                        <span v-else class="bg">{{scope.row.num.split('')[4]}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination :pager-count="5" @current-change="fy" :page-size="20" background layout="prev, pager, next" :total="total"></el-pagination>
        
    </div>
</template>
 
<script>
import { mapState } from "Vuex";
export default {
    name: "lottery",
    data() {
        return {
            dateVal: "",
            list: [],
            pages: 1,
            total:10,
            endTime:"",
            startTime:"",
        };
    },
    computed: {
        ...mapState(["saveType"])
    },
    watch: {
        saveType(){
            this.getList();
        },
        dateVal() {
            this.pages = 1
            this.getList();
        }
    },
    created() {
        this.dateVal = this.formatDateTime(new Date());

        this.endTime = new Date();
        var passTime = new Date().setMonth(new Date().getMonth()-1)
        this.startTime =new Date(passTime); 

        this.getList();
    },
    methods: {
        goto(){
            if(this.saveType == 1){
                window.location.href = "https://vietlotte.org/analy.html"
            }else{
                window.location.href = "https://auluckylottery.com/results/lucky-ball-5"
            }
            
        },
        fy(val){
            this.pages = val
            this.getList();
        },
        getList() {
            var params = {
                pageNum: this.pages,
                pageSize: 20,
                module: this.saveType,
                day: this.dateVal
            };
            this.$api.post(this.$url.winNumber, params, res => {
                console.log(res.data);
                if(res.data == undefined){
                    this.total = 1
                    return false
                }
                if (res.data.code == 200) {
                    this.list = res.data.data;
                    this.$set(this.list[0],'place',true)
                    this.total = res.data.count
                    console.log(this.list,9999)
                }
            });
        },
        selectData() {
            this.$refs.datePicker.open();
        },
        handleConfirm(value) {
            this.dateVal = this.formatDateTime(value);
        },
        formatDateTime(date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? "0" + m : m;
            var d = date.getDate();
            d = d < 10 ? "0" + d : d;
            var h = date.getHours();
            var minute = date.getMinutes();
            minute = minute < 10 ? "0" + minute : minute;
            return y + "-" + m + "-" + d;
        }
    }
};
</script>
 
<style scoped lang="less">
.urls{
    font-size: 14px;
    margin: 10px 0;
    color:blue;
}
.el-table th>.cell{
    text-align: right !important;
}
.lottery {
    padding: 0 5px 10px;
    box-sizing: border-box;
    .choose-time {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        span {
            border-bottom: 1px solid #eee;
            height: 30px;
            line-height: 30px;
            margin-left: 10px;
            font-size: 16px;
            width: 50%;
        }
    }
    .list {
        margin: 10px 0;
    }
    .bg{
        display: inline-block;
        width: 40px;
        height: 40px;
        background: url('../assets/img/blueball.gif') no-repeat center;
        text-align: center;
        line-height: 40px;
        color: #fff;
    }
    .bg2{
        display: inline-block;
        width: 40px;
        height: 40px;
        background: url('../assets/img/redball.gif') no-repeat center;
        text-align: center;
        line-height: 40px;
        color: #fff;
    }
}
</style>
